<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>发表评论</title>  
    <link rel="stylesheet" href="base.css">  
</head>  
<body>  
    <div class="box">  
        <div class="box_top">  
            <textarea id="comment" cols="80" rows="10" placeholder="请输入你的评论"></textarea>  
            <button id="btn">发布</button>  
        </div>  
        <ul id="comc">  
            <li>我的内容<a href="javascript:void(0);" class="delete">删除</a></li>  
        </ul>  
    </div>  
    <script>  
        window.onload = function(){  
            function $(id){  
                return document.getElementById(id);  
            }  
  
            var btn = $('btn');  
            btn.onclick = function(){  
                var content = $('comment').value;  
                if(content.trim().length === 0){  
                    alert('请输入内容');  
                    return;  
                }  
                var newLi = document.createElement('li');  
                newLi.innerHTML = `${content}<a href="javascript:void(0);" class="delete">删除</a>`;  
                $('comc').insertBefore(newLi, $('comc').firstChild);  
                $('comment').value = '';  
            };  
  
            // 使用事件委托处理删除操作  
            $('comc').addEventListener('click', function(event) {  
                if (event.target.classList.contains('delete')) {  
                    event.target.parentNode.remove();  
                }  
            });  
        }  
    </script>  
</body>  
</html>